: The Picture element

The srcset attribute is used to offer a list of possible images based on size or the display's pixel density.

It is composed of a comma-separated list of image descriptors. Each image descriptor is composed of a URL of the image, and either:

Make sure to note that:

The following example illustrates the usage of srcset attribute with the element to specify a high-density and standard-resolution image:

The srcset attribute can also be used on the element without needing the element. The following example demonstrates how to use the srcset attribute to specify standard-resolution and high-density images, respectively:

The sizes attribute is not mandatory when using srcset, but it is recommended to use it in order to provide additional information to the browser to help it select the best image source.

Without sizes, the browser will use the default size of the image as specified by its dimensions in pixels. This may not be the best fit for all devices, especially if the image is displayed on different screen sizes or in different contexts.

Please note that sizes will have its effect only if width dimension descriptors are provided with srcset instead of pixel ratio values (200w instead of 2x for example). For more information on using srcset, see the Responsive images documentation.